<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <div class="h-16 bg-white shadow-sm flex items-center px-6 justify-between border-b">
      <!-- 邮箱主标题 -->
      <div class="flex items-center space-x-4">
        <el-icon class="message text-blue text-34xl ">
          <Message />
        </el-icon>
        <span class="messagetext text-2xl font-bold tracking-tight">邮箱</span>
      </div>
      <!-- 搜索栏 -->
      <div class="flex items-center space-x-4">
        <div class="relative search-input w-72">
          <input type="text" placeholder="搜索邮件内容"
            class="searchtext pl-10 pr-4 py-2.5 w-full rounded-lg border-none bg-gray-50 focus:ring-2 focus:ring-blue-500/20 focus:outline-none text-sm" />
          <el-icon class="absolute left-3 top-1/2 transform -translate-y-1/2 " style="position: absolute;">
            <Search />
          </el-icon>

        </div>
      </div>


    </div>
    <div class="flex">
      <!-- 左侧导航 -->
      <div class="w-56 bg-white h-[calc(100vh-4rem)] shadow-sm">
        <!-- 写邮件 -->
        <div class="p-4">
          <button @click="writeEmail"
            class="animate-button w-full bg-blue-600 hover:bg-blue-700 transition-colors text-white px-6 py-2 rounded-lg flex items-center justify-center space-x-4 !rounded-button whitespace-nowrap shadow-lg text-lg font-semibold">
            <el-icon>
              <Edit />
            </el-icon>
            <span class="font-medium">写邮件</span>
          </button>
        </div>
        <!-- 导航栏 -->
        <div class="space-y-2 pt-4"> <!-- 增加垂直间隔 -->
          <!-- 收件箱 -->
          <div
            class="flex font-bold items-center px-6 py-3 text-gray-800 font-semibold rounded-lg mx-4 transition duration-300 ease-in-out cursor-pointer"
            @click="reciveBox" :class="{ 'bg-blue-100': selectedTab === 'inbox' }">
            <el-icon class="mr-4 text-xl"> <!-- 增加图标大小和间隔 -->
              <ChatDotSquare />
            </el-icon>
            <span>收件箱</span>
          </div>
          <!-- 草稿箱 -->
          <div
            class="flex font-bold items-center px-6 py-3 text-gray-800 hover:bg-gray-100 rounded-lg mx-4 transition duration-300 ease-in-out cursor-pointer"
            @click="draftBox" :class="{ 'bg-blue-100': selectedTab === 'draft' }">
            <el-icon class="mr-4 text-xl"> <!-- 增加图标大小和间隔 -->
              <Document />
            </el-icon>
            <span>草稿箱</span>
          </div>
          <!-- 已发送 -->
          <div
            class="flex font-bold items-center px-6 py-3 text-gray-800 hover:bg-gray-100 rounded-lg mx-4 transition duration-300 ease-in-out cursor-pointer"
            @click="sentBox" :class="{ 'bg-blue-100': selectedTab === 'sent' }">
            <el-icon class="mr-4 text-xl"> <!-- 增加图标大小和间隔 -->
              <Memo />
            </el-icon>
            <span>已发送</span>
          </div>
        </div>

      </div>
      <!-- 右侧内容区 写邮件-->
      <div class="flex-1 p-6" v-if="selectedTab === 'writemail'">
        <div class="bg-white rounded-lg border">
          <!-- 收件人区域 -->
          <div class="email-box p-4 border-b">
            <!-- <div class="flex items-center mb-4">
              <span class="w-20 text-gray-600">收件人：</span>
              <el-input placeholder="请输入收件人邮箱" class="flex-1 input-field" />
            </div>
            <div class="flex items-center">
              <span class="w-20 text-gray-600">主题：</span>
              <el-input placeholder="请输入邮件主题" class="flex-1 input-field" />
            </div> -->
            <div class="flex items-center mb-4">
              <span class="w-20 text-gray-600">收件人：</span>
              <input type="text" v-model="to" placeholder="请输入收件人邮箱" class="flex-1 input-field" />
            </div>
            <div class="flex items-center">
              <span class="w-20 text-gray-600">主题：</span>
              <input type="text" v-model="subject" placeholder="请输入邮件主题" class="flex-1 input-field" />
            </div>
          </div>

          <!-- 工具栏 -->
          <div class="flex items-center p-2 border-b bg-gray-50 custom-buttons">
            <el-button class="rounded-button whitespace-nowrap attachment-button">
              <el-icon>
                <Document />
              </el-icon>
              附件
            </el-button>
            <el-button class="ml-2 rounded-button whitespace-nowrap image-button">
              <el-icon>
                <Picture />
              </el-icon>
              图片
            </el-button>
            <!-- 其他按钮 -->
            <el-button class="ml-2 rounded-button whitespace-nowrap draft-button" @click="draftEmail">
              <el-icon>
                <Edit />
              </el-icon>
              存草稿
            </el-button>
            <el-button type="primary" class="ml-2 rounded-button whitespace-nowrap send-button" @click="sendEmail">
              <el-icon>
                <Position />
              </el-icon>
              发送
            </el-button>
          </div>


          <!-- 编辑区 -->
          <div class="p-4">
            <el-input v-model="content" type="textarea" :rows="12" placeholder="请输入邮件正文内容" />
          </div>
        </div>
      </div>
      <!-- 右侧内容区 收件箱-->
      <div class="flex-1 p-6" v-if="selectedTab === 'inbox'">
        <div class="bg-white rounded-lg shadow">
          <!-- 工具栏 -->
          <div class="toolbar flex items-center space-x-2 p-4 border-b">
            <!-- 隐藏的勾选框，用于表示是否全部选中 -->
            <input type="checkbox" id="selectAllInbox" class="hidden" />

            <!-- 删除按钮 -->
            <button class="toolbar-button">
              <svg class="text-lg" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                  d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                  clip-rule="evenodd"></path>
              </svg>
              <span class="ml-1.5 text-sm">删除</span>
            </button>

            <!-- 星标按钮 -->
            <button class="toolbar-button" id="starButton">
              <svg class="text-lg star-icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                </path>
              </svg>
              <span class="ml-1.5 text-sm">标记星标</span>
            </button>

            <!-- 标记已读按钮 -->
            <button class="toolbar-button">
              <svg class="text-lg" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.66 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z">
                </path>
              </svg>
              <span class="ml-1.5 text-sm">标记已读</span>
            </button>
          </div>

          <!-- 邮件列表 -->
          <div class="divide-y divide-gray-100">
            <div v-for="mail in mailList"
              class="flex items-center p-4 hover:bg-blue-50/50 cursor-pointer transition-colors">
              <el-checkbox v-model="mail.selected" />
              <el-icon class="text-yellow-500 mr-4 text-lg">
                <Star />
              </el-icon>
              <div class="flex-1 min-w-0" @click="showMailDetail(mail)">
                <div class="flex items-center">
                  <span class="font-medium truncate text-gray-900">{{
                    mail.sendAccount
                  }}</span>
                  <span class="ml-auto text-sm text-gray-500">{{
                    formatDate(mail.sendTime)
                  }}</span>
                </div>
                <div class="text-gray-600 truncate mt-1.5 text-sm">
                  {{ mail.title }}
                </div>
                <div class="text-gray-400 truncate mt-1 text-sm">
                  {{ mail.content }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容区 草稿箱-->
      <div class="flex-1 p-6" v-if="selectedTab === 'draft'">
        <!-- 草稿箱界面 -->
        <div class="bg-white rounded-lg shadow">
          <!-- 工具栏 -->
          <div class="toolbar flex items-center space-x-2 p-4 border-b">
            <!-- 隐藏的勾选框，用于表示是否全部选中 -->
            <input type="checkbox" id="selectAllInbox" class="hidden" />

            <!-- 删除按钮 -->
            <button class="toolbar-button">
              <svg class="text-lg" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                  d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                  clip-rule="evenodd"></path>
              </svg>
              <span class="ml-1.5 text-sm">删除</span>
            </button>

            <!-- 星标按钮 -->
            <button class="toolbar-button" id="starButton">
              <svg class="text-lg star-icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                </path>
              </svg>
              <span class="ml-1.5 text-sm">标记星标</span>
            </button>

            <!-- 标记已读按钮 -->
            <button class="toolbar-button">
              <svg class="text-lg" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.66 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z">
                </path>
              </svg>
              <span class="ml-1.5 text-sm">标记已读</span>
            </button>
          </div>
          <!-- 邮件列表 -->
          <div class="divide-y divide-gray-100">
            <div v-for="(mail, index) in draftMailList" :key="index"
              class="flex items-center p-4 hover:bg-blue-50/50 cursor-pointer transition-colors">
              <el-checkbox v-model="mail.selected" />
              <el-icon class="text-yellow-500 mr-4 text-lg">
                <Star />
              </el-icon>
              <div class="flex-1 min-w-0" @click="updatedraftEmail(mail)">
                <div class="flex items-center">
                  <span class="font-medium truncate text-gray-900">{{
                    mail.receiveAccount
                  }}</span>
                  <span class="ml-auto text-sm text-gray-500">{{
                    formatDate(mail.sendTime)
                  }}</span>
                </div>
                <div class="text-gray-600 truncate mt-1.5 text-sm">
                  {{ mail.title }}
                </div>
                <div class="text-gray-400 truncate mt-1 text-sm">
                  {{ mail.content }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 p-6" v-if="selectedTab === 'updatemail'">
        <div class="bg-white rounded-lg border">
          <!-- 收件人区域 -->
          <div class="p-4 border-b">
            <div class="flex items-center mb-4">
              <span class="w-20 text-gray-600">收件人：</span>
              <el-input v-model="to" placeholder="请输入收件人邮箱" class="flex-1" />
            </div>
            <div class="flex items-center">
              <span class="w-20 text-gray-600">主题：</span>
              <el-input v-model="subject" placeholder="请输入邮件主题" class="flex-1" />
            </div>
          </div>

          <!-- 工具栏 -->
          <div class="flex items-center p-2 border-b bg-gray-50">
            <el-button class="!rounded-button whitespace-nowrap">
              <el-icon>
                <Document />
              </el-icon>
              附件
            </el-button>
            <el-button class="ml-2 !rounded-button whitespace-nowrap">
              <el-icon>
                <Picture />
              </el-icon>
              图片
            </el-button>
            <div class="h-4 mx-4 border-r"></div>
            <el-button class="!rounded-button whitespace-nowrap" @click="draftEmail">
              <el-icon>
                <Edit />
              </el-icon>
              存草稿
            </el-button>
            <el-button type="primary" class="ml-2 !rounded-button whitespace-nowrap" @click="update_email">
              <el-icon>
                <Position />
              </el-icon>
              发送
            </el-button>
          </div>

          <!-- 编辑区 -->
          <div class="p-4">
            <el-input v-model="content" type="textarea" :rows="12" placeholder="请输入邮件正文内容" />
          </div>
        </div>
      </div>
      <!-- 右侧内容区 已发送-->
      <div class="flex-1 p-6" v-if="selectedTab === 'sent'">
        <!-- 已发送的邮件界面 -->
        <div class="bg-white rounded-lg shadow">
          <!-- 工具栏 -->
          <div class="toolbar flex items-center space-x-2 p-4 border-b">
            <!-- 隐藏的勾选框，用于表示是否全部选中 -->
            <input type="checkbox" id="selectAllInbox" class="hidden" />

            <!-- 删除按钮 -->
            <button class="toolbar-button">
              <svg class="text-lg" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                  d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                  clip-rule="evenodd"></path>
              </svg>
              <span class="ml-1.5 text-sm">删除</span>
            </button>

            <!-- 星标按钮 -->
            <button class="toolbar-button" id="starButton">
              <svg class="text-lg star-icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                </path>
              </svg>
              <span class="ml-1.5 text-sm">标记星标</span>
            </button>

            <!-- 标记已读按钮 -->
            <button class="toolbar-button">
              <svg class="text-lg" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.66 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z">
                </path>
              </svg>
              <span class="ml-1.5 text-sm">标记已读</span>
            </button>
          </div>
          <!-- 邮件列表 -->
          <div class="divide-y divide-gray-100">
            <div v-for="(mail, index) in sentMailList" :key="index"
              class="flex items-center p-4 hover:bg-blue-50/50 cursor-pointer transition-colors">
              <el-checkbox v-model="mail.selected" />
              <el-icon class="text-yellow-500 mr-4 text-lg">
                <Star />
              </el-icon>
              <div class="flex-1 min-w-0" @click="showMailDetail(mail)">
                <div class="flex items-center">
                  <span class="font-medium truncate text-gray-900">{{
                    mail.receiveAccount
                  }}</span>
                  <span class="ml-auto text-sm text-gray-500">{{
                    formatDate(mail.sendTime)
                  }}</span>
                </div>
                <div class="text-gray-600 truncate mt-1.5 text-sm">
                  {{ mail.title }}
                </div>
                <div class="text-gray-400 truncate mt-1 text-sm">
                  {{ mail.content }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      邮件详情页-->
      <div class="flex-1 p-6" v-if="selectedTab === 'mailDetail'">
        <div class="bg-white rounded-lg shadow-sm flex-1 flex flex-col">
          <!-- 头部操作栏 -->
          <div class="h-14 border-b flex items-center justify-between px-4">
            <div class="flex items-center">
              <el-button circle @click="returnToList" class="!rounded-full mr-2 hover:bg-gray-100" size="small">
                <el-icon class="text-gray-600">
                  <ArrowLeft />
                </el-icon>
              </el-button>
              <h2 class="text-lg font-semibold text-gray-800">{{ currentMail.title }}</h2>
            </div>
            <div class="flex items-center space-x-3">
              <el-tooltip content="删除" placement="bottom">
                <el-button text class="!p-2 hover:bg-gray-100">
                  <el-icon class="text-lg">
                    <Delete />
                  </el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="转发" placement="bottom">
                <el-button text class="!p-2 hover:bg-gray-100">
                  <el-icon class="text-lg">
                    <Share />
                  </el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="回复" placement="bottom">
                <el-button text class="!p-2 hover:bg-gray-100">
                  <el-icon class="text-lg">
                    <RefreshLeft />
                  </el-icon>
                </el-button>
              </el-tooltip>
              <div class="h-5 border-r"></div>
              <el-tooltip content="更多操作" placement="bottom">
                <el-button text class="!p-2 hover:bg-gray-100">
                  <el-icon class="text-xl">
                    <MoreFilled />
                  </el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </div>

          <!-- 邮件主体内容 -->
          <div class="flex-1 overflow-auto p-6">
            <!-- 发件人信息 -->
            <div class="flex items-start mb-6">
              <el-avatar :size="48" class="mr-4" :src="currentMail.avatar">
                {{ currentMail.sendAccount[0] }}
              </el-avatar>
              <div class="flex-1 min-w-0">
                <div class="flex items-center">
                  <span class="text-base font-medium mr-3">{{ currentMail.sendAccount }}</span>
                  <span class="text-sm text-gray-500">{{ formatDate(currentMail.sendTime) }}</span>
                  <el-tag v-if="currentMail.starred" size="small" class="ml-2" effect="plain">
                    <el-icon class="mr-1">
                      <StarFilled />
                    </el-icon>
                    星标邮件
                  </el-tag>
                </div>
                <div class="text-sm text-gray-500 mt-1" style="font-weight: bold;  /* 加粗 */font-size: 18px;/* 放大字体 */">
                  收件人：<span class="ml-1 text-gray-600">{{ currentMail.receiveAccount }}</span>
                  <span v-if="currentMail.cc" class="ml-3">
                    抄送：<span class="text-gray-600">{{ currentMail.cc }}</span>
                  </span>
                </div>
              </div>
            </div>

            <!-- 邮件正文 -->
            <div class="mail-content border-t pt-6">
              <pre
                class="whitespace-pre-wrap font-sans text-gray-800 leading-relaxed text-base">{{ currentMail.content }}</pre>
            </div>

            <!-- 附件区域 -->
            <div v-if="currentMail.attachments?.length" class="attachments mt-8">
              <h3 class="text-sm font-medium text-gray-600 mb-4 flex items-center">
                <el-icon class="mr-2">
                  <FolderOpened />
                </el-icon>
                附件（{{ currentMail.attachments.length }}个）
              </h3>
              <div class="grid grid-cols-2 gap-3">
                <div v-for="(file, index) in currentMail.attachments" :key="index"
                  class="group flex items-center p-3 bg-gray-50 rounded-md border hover:border-blue-300 transition-colors cursor-pointer">
                  <div class="flex items-center flex-1 min-w-0">
                    <el-icon class="text-2xl mr-3 text-blue-500">
                      <component :is="getFileIcon(file.type)" />
                    </el-icon>
                    <div class="flex-1 min-w-0">
                      <div class="text-sm text-gray-800 truncate">{{ file.name }}</div>
                      <div class="text-xs text-gray-400 mt-1">{{ file.size }}</div>
                    </div>
                  </div>
                  <el-button text class="opacity-0 group-hover:opacity-100">
                    <el-icon>
                      <Download />
                    </el-icon>
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Message, Search, User, Edit, Document, Delete, Star, Reading, Memo, } from "@element-plus/icons-vue";
import { addEmail, getByDraft, getByReceiver, getBySender, updateEmail } from "../../api/student/email/email.js";
import { ArrowLeft } from "@element-plus/icons-vue";
onMounted(() => {
  const userData = {
    account: JSON.parse(localStorage.getItem("userInfo")).account,
    page: pagination.value.currentPage,
    pageSize: pagination.value.pageSize
  }
  console.log(userData.account)
  getBy_Sender(userData)
  getBy_Draft(userData)
  getBy_Receiver(userData)
})
// 日期格式化方法
const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`; // 返回 yyyy-mm-dd 格式
};
// 分页
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 100
});

// Mock 数据
let mailList = ref([]);

let draftMailList = ref([]);

let sentMailList = ref([
]);

const to = ref("");
const account = ref("");
const subject = ref("");
const content = ref("");
const selectedTab = ref("inbox");

const selectAllInbox = ref(false);
const selectAllDraft = ref(false);
const selectAllSent = ref(false);

// 后端接口函数
const sendEmailApi = (emailData) => {
  // 调用后端接口发送邮件
  addEmail(emailData)
};
async function getBy_Receiver(data) {
  await getByReceiver(data).then(function (response) {
    mailList.value = response.items[0]

  })
}
async function getBy_Draft(data) {
  await getByDraft(data).then(function (response) {
    draftMailList = response.items[0]
  })
} async function getBy_Sender(data) {
  await getBySender(data).then(function (response) {
    sentMailList = response.items[0]
  })
}

// 新增状态管理
const currentMail = ref(null);
const previousTab = ref("inbox");
const userData = {
  account: JSON.parse(localStorage.getItem("userInfo")).account,
  page: pagination.value.currentPage,
  pageSize: pagination.value.pageSize
}
function reciveBox() {
  selectedTab.value = 'inbox'
  getBy_Receiver(userData)
}
function draftBox() {
  selectedTab.value = 'draft'
  getBy_Draft(userData)
}
function sentBox() {
  selectedTab.value = 'sent'
  getBy_Sender(userData)
}
// 查看邮件详情
const showMailDetail = (mail) => {
  previousTab.value = selectedTab.value;
  currentMail.value = mail;
  selectedTab.value = "mailDetail";
  console.log(selectedTab.value)
};

// 返回邮件列表
const returnToList = () => {
  selectedTab.value = previousTab.value;
  currentMail.value = null;
};
const draftEmail = () => {
  const emailData = {
    receiveAccount: to.value,
    sendAccount: JSON.parse(localStorage.getItem("userInfo")).account,
    title: subject.value,
    content: content.value,
    status: 0,
    type: "个人邮件"
  };
  addEmail(emailData)
}
const deleteEmailApi = (mailIds) => {
  // 调用后端接口删除邮件
  console.log("Deleting emails:", mailIds);
};

const markAsStarredApi = (mailIds) => {
  // 调用后端接口标记星标
  console.log("Marking as starred:", mailIds);
};
let id = ref(0)
//修改草稿
function updatedraftEmail(data) {
  previousTab.value = selectedTab.value;
  selectedTab.value = 'updatemail'
  id.value = data.id
  to.value = data.receiveAccount
  subject.value = data.title
  content.value = data.content
}
//进入写邮件
function writeEmail() {
  selectedTab.value = 'writemail'
  to.value = ''
  subject.value = ''
  content.value = ''
}
// 发送邮件
const sendEmail = () => {
  const emailData = {
    receiveAccount: to.value,
    sendAccount: JSON.parse(localStorage.getItem("userInfo")).account,
    title: subject.value,
    content: content.value,
    status: 1,
    type: "个人邮件",

  };
  sendEmailApi(emailData);
  to.value = "";
  subject.value = "";
  content.value = "";
};
const update_email = () => {
  const emailData = {
    receiveAccount: to.value,
    sendAccount: JSON.parse(localStorage.getItem("userInfo")).account,
    title: subject.value,
    content: content.value,
    status: 1,
    type: "个人邮件",
    id: id.value
  };
  updateEmail(emailData);
  to.value = "";
  subject.value = "";
  content.value = "";
};

// 删除选中的邮件
const deleteSelectedMails = (type) => {
  let selectedMails;
  if (type === "inbox") {
    selectedMails = mailList.value.filter((mail) => mail.selected);
  } else if (type === "draft") {
    selectedMails = draftMailList.value.filter((mail) => mail.selected);
  } else if (type === "sent") {
    selectedMails = sentMailList.value.filter((mail) => mail.selected);
  }

  const mailIds = selectedMails.map((mail) => mail.id); // 假设每封邮件有唯一的 id
  deleteEmailApi(mailIds);

  if (type === "inbox") {
    mailList.value = mailList.value.filter((mail) => !mail.selected);
  } else if (type === "draft") {
    draftMailList.value = draftMailList.value.filter((mail) => !mail.selected);
  } else if (type === "sent") {
    sentMailList.value = sentMailList.value.filter((mail) => !mail.selected);
  }

  selectAllInbox.value = false;
  selectAllDraft.value = false;
  selectAllSent.value = false;
};

// 标记星标
const markAsStarred = (type) => {
  let selectedMails;
  if (type === "inbox") {
    selectedMails = mailList.value.filter((mail) => mail.selected);
  } else if (type === "draft") {
    selectedMails = draftMailList.value.filter((mail) => mail.selected);
  } else if (type === "sent") {
    selectedMails = sentMailList.value.filter((mail) => mail.selected);
  }

  const mailIds = selectedMails.map((mail) => mail.id); // 假设每封邮件有唯一的 id
  markAsStarredApi(mailIds);
};

// 全选
const toggleSelectAll = (type) => {
  if (type === "inbox") {
    mailList.value.forEach((mail) => {
      mail.selected = selectAllInbox.value;
    });
  } else if (type === "draft") {
    draftMailList.value.forEach((mail) => {
      mail.selected = selectAllDraft.value;
    });
  } else if (type === "sent") {
    sentMailList.value.forEach((mail) => {
      mail.selected = selectAllSent.value;
    });
  }
};
//收到邮件的工具栏




</script>
<style scoped>
.mail-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
}

.attachments .el-icon {
  @apply transition-transform;
}

.attachments .el-button:hover .el-icon {
  @apply text-blue-600;
}

:deep(.el-tag) {
  @apply bg-yellow-50 border-yellow-100 text-yellow-600;
}

/* 邮件主标题 */
.message {
  color: #1d4ed8;
  /* Tailwind CSS的text-blue-700对应的颜色 */
  font-size: 1.875rem;
  /* Tailwind CSS的text-3xl对应的字体大小 */
}

.messagetext {
  font-size: 1.5rem;
  /* Tailwind CSS的text-2xl对应的字体大小 */
  font-weight: 700;
  /* Tailwind CSS的font-bold对应的字体粗细 */
  letter-spacing: normal;
  /* Tailwind CSS的tracking-normal对应的字符间距 */
}

/* 搜索栏 */
.searchtext:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  /* 蓝色光环 */
}

.searchtext:hover {
  shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* 更明显的阴影 */
}

.absolute {
  color: #6b7280;
  /* 中性灰色 */
  font-size: 1.25em;
  /* 图标大小 */
}

/* 写邮件 */


/* 按钮基本动画 */
.animate-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 鼠标悬停时的按钮效果 */
.animate-button:hover {
  transform: scale(1.05);
  /* 放大按钮 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* 更深的阴影 */
}

/* 按钮点击时的效果 */
.animate-button:active {
  transform: scale(0.95);
  /* 缩小按钮 */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  /* 更浅的阴影 */
}

/* 收件人区域 */
.input-field .el-input__inner {
  border-radius: 4px;
  border-color: #e2e8f0;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.input-field .el-input__inner:focus {
  border-color: #63b3ed;
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.2);
}

.email-box {
  background-color: #ffffff;
  border-radius: 8px;
  transition: box-shadow 0.3s ease-in-out;
  font-weight: bold;
  /* 加粗 */
  font-size: 18px;
  /* 放大字体 */
}

.email-box input {
  border: 1px solid #171719;
}

.email-box:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 工具栏 */
/* 限制以下样式只应用于具有(custom-buttons)类的元素内部 */
.custom-buttons .rounded-button {
  /* 添加圆角 */
  border-radius: 999px;
  /* 添加过渡效果 */
  transition: background-color 0.3s ease;
}

/* 鼠标悬停时改变背景颜色 */
.custom-buttons .attachment-button:hover,
.custom-buttons .image-button:hover,
.custom-buttons .draft-button:hover {
  background-color: #e0e0e0;
}

/* 发送按钮置于最右边 */
.custom-buttons .send-button {
  /* 自动外边距将按钮推向最右边 */
  margin-left: auto;
  /* 添加过渡效果 */
  transition: transform 0.3s ease;
}

/* 鼠标悬停时发送按钮放大 */
.custom-buttons .send-button:hover {
  transform: scale(1.05);
}

/* 确保按钮文本不换行 */
.custom-buttons .whitespace-nowrap {
  white-space: nowrap;
}

/* 按钮之间的左侧外边距 */
.custom-buttons .ml-2 {
  margin-left: 0.5rem;
}

/* 父容器的背景颜色和底部边框 */
.custom-buttons {
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  /* 使用flex布局使内容水平居中 */
  display: flex;
  align-items: center;
  /* 内边距 */
  padding: 0.5rem;
}

/*收到邮件的工具栏*/
.toolbar {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}

.toolbar-button {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  color: #6b7280;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  cursor: pointer;
}

.toolbar-button:hover {
  color: #2563eb;
  background-color: #eff6ff;
}

.star-icon {
  color: #6b7280;
}

.star-icon.active {
  color: #fbbf24;
}

.hidden {
  display: none;
}


/**/
.toolbar {
  /* 工具栏基本样式 */
  background-color: #f8f9fa;
  /* 背景颜色 */
  border-bottom: 1px solid #e7e7e7;
  /* 下边框 */
}

.toolbar-button {
  /* 按钮基本样式 */
  display: flex;
  /* 水平布局 */
  align-items: center;
  /* 垂直居中 */
  padding: 8px 12px;
  /* 内边距 */
  border: none;
  /* 无边框 */
  background-color: transparent;
  /* 透明背景 */
  cursor: pointer;
  /* 鼠标指针变为手形 */
  transition: background-color 0.3s ease;
  /* 背景颜色过渡效果 */
}

.toolbar-button:hover {
  /* 按钮悬停效果 */
  background-color: #e9ecef;
  /* 悬停时背景颜色 */
}

.toolbar-button svg {
  /* SVG图标基本样式 */
  width: 20px;
  /* 图标宽度 */
  height: 20px;
  /* 图标高度 */
}

.toolbar-button span {
  /* 按钮文本基本样式 */
  margin-left: 8px;
  /* 文本与图标的间距 */
  font-size: 14px;
  /* 文本字体大小 */
  color: #333;
  /* 文本颜色 */
}

.star-icon {
  /* 星标图标初始颜色 */
  color: #ccc;
}

.star-icon.active {
  /* 星标图标激活颜色 */
  color: #ffcc00;
}
</style>